/* Basic styling for body and elements */  
body {  
    margin: 0;  
    font-family: Arial, sans-serif;  
}  
  
header, footer {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 1em 0;  
}  
  
.content {  
    display: flex;  
    flex-wrap: wrap; /* Allows items to wrap to new lines */  
    justify-content: space-between; /* Spaces items evenly */  
    padding: 10px;  
    box-sizing: border-box;  
}  
  
.item {  
    background-color: #f4f4f4;  
    color: #333;  
    border: 1px solid #ddd;  
    padding: 20px;  
    margin-bottom: 10px;  
    flex: 1 1 calc(50% - 20px); /* Flex grow, shrink, and basis */  
    box-sizing: border-box;  
}  
  
/* Media Queries */  
  
/* For screens smaller than 600px */  
@media (max-width: 599px) {  
    .item {  
        flex: 1 1 100%; /* Full width on small screens */  
    }  
}  
  
/* For screens between 600px and 960px */  
@media (min-width: 600px) and (max-width: 959px) {  
    .item {  
        flex: 1 1 calc(50% - 20px); /* Two items per row */  
    }  
}  
  
/* For screens larger than 960px */  
@media (min-width: 960px) {  
    .item {  
        flex: 1 1 calc(33.333% - 20px); /* Three items per row */  
    }  
}  
  
/* Optional: Add some spacing between items */  
.content {  
    gap: 10px; /* This will add spacing between flex items */  
}  
